<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jquery deferred</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
  <h1>deferred</h1>
  <script>
  // jquery 1.5 之前的写法
    var ajax = $.ajax({
      url: './data.json',
      success: function() {
        console.log('success 1')
        console.log('success 2')
        console.log('success 3')
      }
    })

    // 1.5 之后的写法 deferred
    var $ajax = $.ajax('./data.json')
    $ajax.done(function() {
      console.log('success a')
    })
    $ajax.done(function() {
      console.log('success b')
    })
    $ajax.fail(function() {
      console.log('error')
    })
    $ajax.done(function() {
      console.log('success c')
    })

    // deferred then 写法
    var $$ajax = $.ajax('./data.json')
    $$ajax.then(function() {
      console.log('success then 1')
    }).then(function() {
      console.log('success then 2')
    }).then(function() {
      console.log('success then 3')
    }, function() {
      console.log('fail')
    })
  
  </script>
  
</body>
</html>